<template>
  <div>
    <Row class="header" type="flex" justify="start">
      <Col span="24">
        <Icon class="icon" type="md-pie"/>
        <span class="title">2月12日零时以来外地来沈人员情况</span>
      </Col>
    </Row>
    <br>
    <div id="provinceInDailyRatio" :style="{ width: width + 'px', height: height + 'px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import { findInStateProvincelist } from '@/api/yi-qing-fang-kong'
import mockData from './mockData'

export default {
  name: 'provinceInDailyRatioEchart',
  data () {
    return {
      chartData: [],
      centerData: []
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 500
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    },
    props: {
      showType: {
        type: String,
        default: () => {
          return 'pc'
        }
      }
    }
  },
  mounted () {
    this.centerData = this.showType === 'pc' ? ['50%', '50%'] : ['60%', '50%']
    this.chart()
  },
  methods: {
    chart () {
      // findInStateProvincelist().then(ret => {
      if (mockData.data.errcode === 0) {
        this.chartData = mockData.data.data
        // 根据对象中属性排序处理
        const handle = (property) => {
          return function (a, b) {
            const val1 = a[property]
            const val2 = b[property]
            return val2 - val1
          }
        }
        this.chartData.sort(handle('instate'))
        let option = {
          title: {
            text: ''
          },
          textStyle: {
            // color: '#bababa'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            left: 10
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(50,50,50,0.6)',
            // formatter: '{a} <br/>{b} : {c} ({d}%)'
            formatter: function (params, ticket, callback) {
              return params.value.province + ': ' + params.value.instate + '人  (' + params.percent + '%)'
            }
          },
          dataset: {
            source: []
          },
          series: [
            {
              type: 'pie',
              // radius: '55%',
              radius: ['70%', '90%'],
              center: this.centerData,
              // color: ['#57B1EE', '#6DD9DB', '#B8A3DF'],
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '25',
                    fontWeight: 'bold'
                  }
                }
              },
              itemStyle: {
                // 通常情况下：
                normal: {
                },
                // 鼠标悬停时：
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              encode: {
                itemName: 'province',
                value: 'instate'
              }
            }
          ]
        }
        this.chartData.forEach(item => {
          option.dataset.source.push(item)
        })
        let myChart = echarts.init(document.getElementById('provinceInDailyRatio'))
        myChart.setOption(option)
      } else {
        this.$Message.error({
          content: '数据获取失败,\n' + mockData.data.errmsg
        })
      }
      // })
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
</style>
